﻿<script setup lang="ts" name="IphoneShell">
import PhoneHeader from '../phoneHeader/index.vue'
const props = defineProps({
  height: { type: Number }
})
const mainHeight = ref((props.height - 26 - 58 - 20 - 10 - 2) || 0)
watch(
  () => props.height,
  (v) => {
    mainHeight.value = v - 26 - 58 - 20 - 10 - 2
  },
  {
    immediate: true,
    deep: true
  }
)
</script>

<template>
  <div class="iphone">
    <div class="iphone-top">
      <span class="speaker"></span>
    </div>
    <div class="top-bar"></div>
    <div class="iphone-screen" :style="{height: mainHeight +'px'}">
      <PhoneHeader></PhoneHeader>
      <div class="ios-box">
        <slot />
      </div>
    </div>
    <div class="buttons">
      <span class="on-off"></span>
      <span class="sleep"></span>
      <span class="up"></span>
      <span class="down"></span>
    </div>
    <div class="bottom-bar"></div>
    <div class="iphone-bottom">
      <span></span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.iphone {
  box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #999, 0 0 30px 0px rgba(0, 0, 0, 0.5);
  border: 5px solid #d9dbdc;
  background: #f8f8f8;
  padding: 10px 0;
  border-radius: 40px;
  width: 387px;
  position: relative;
  margin: 0 auto;
  .iphone-top {
    padding: 5px 110px 15px;
    position: relative;
    .speaker {
      display: block;
      width: 70px;
      height: 6px;
      margin: 0 auto;
      border-radius: 6px;
      background: #292728;
      opacity: .3;
    }
  }
  .top-bar, .bottom-bar {
    display: block;
    width: 387px;
    height: 15px;
    border-left: 5px solid #BBB;
    border-right: 5px solid #BBB;
    position: absolute;
    left: -5px;
  }
  .top-bar {
    top: 60px;
  }
  .bottom-bar {
    bottom: 80px;
  }
  .iphone-screen {
    --el-phone-header-color: #666;

    background: #fff;
    width: 377px;
    margin: 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    padding-top: 24px;

    .ios-box{
      position: absolute;
      left: 0;
      top: 26px;
      bottom: 0;
      width: 100%;
      overflow: hidden;
    }
  }
  .buttons{
    .on-off, .up, .down, .sleep {
      display: block;
      border: #b5b7b9 1px solid;
      background: linear-gradient(#f0f2f2, #b5b7b9 9%, #f0f2f2, #b5b7b9 94%, #f0f2f2 100%);
      position: absolute;
      border-radius: 2px 0px 0px 2px;
    }
    .on-off {
      height: 40px;
      width: 3px;
      top: 100px;
      left: -8px;
    }
    .up, .down, .sleep {
      height: 60px;
      width: 5px;
      left: -10px;
    }
    .up {
      top: 170px;
    }
    .down {
      top: 250px;
    }
    .sleep {
      left: auto;
      right: -10px;
      top: 170px;
      border-radius: 0px 2px 2px 0px;
    }
  }
  .iphone-bottom {
    padding: 10px 0 0;
    span {
      display: block;
      margin: 0 auto;
      width: 48px;
      height: 48px;
      background: #ccc;
      border-radius: 50%;
      background: linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%);
      position: relative;
      &::after {
        content: "";
        display: block;
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        left: 4px;
        top: 4px;
      }
    }
  }
}
</style>
